<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-17 13:48:46
 * @LastEditTime: 2019-09-02 23:20:20
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="main" >
    <img style="width:100%;height:auto" class="bg" :src="bg" alt />
    <div class="xiong">
      <img :src="curImg" alt />
    </div>
    <audio id="stratMusic2" preload="auto" loop hidden="true" height="100" width="100">
      <source src="http://www.pivotal-china.com/mtx/audio/bgmusic.mp3" type="audio/mpeg" />
      <source src="http://www.pivotal-china.com/mtx/audio/bgmusic.mp3" type="audio/ogg" />
      <embed height="50" width="100" src="http://www.pivotal-china.com/mtx/audio/bgmusic.mp3" />
    </audio>
    <div class="start" :id="id">
      <audio id="stratMusic" controls height="100" width="100">
        <source src="http://www.pivotal-china.com/mtx/audio/click.mp3" type="audio/mpeg" />
        <source src="http://www.pivotal-china.com/mtx/audio/click.mp3" type="audio/ogg" />
        <embed height="50" width="100" src="http://www.pivotal-china.com/mtx/audio/click.mp3" />
      </audio>
      <div @click="go" class="start-button"></div>
    </div>
    <div ref="bg1" class="bgA">
      
    </div>
    <div  ref="bg2" class="animateBg">
        <div ref="showReady" class="animateIndex content">
          <img src="../assets/images/readyText.png" />
          <img  @click="begin" ref="readyBtn" class="btn" src="../assets/images/readyBtn.png" />
        </div>
        <div ref="redayShow"  class="animateIndex jdt">
          <div class="mainAnimate">
            <div style="height:1.6rem">
              <img ref="reday" class="progress" src="../assets/images/ready.png" />
            </div>
          <img style="visibility:hidden" class="btn" src="../assets/images/readyBtn.png" />
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      mainHeight: "",
      id: "show",
      curImg: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00000.png",
      curImgList: [
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00000.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00001.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00002.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00003.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00004.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00005.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00006.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00007.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00008.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00009.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00010.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00011.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00012.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00013.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00014.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00015.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00016.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00017.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00018.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00019.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00020.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00021.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00022.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00023.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00024.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00025.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00026.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00027.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00028.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00029.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00030.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00031.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00032.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00033.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00034.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00035.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00036.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00037.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00038.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00039.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00040.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00041.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00042.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00043.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00044.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00045.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00046.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00047.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00048.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00049.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00050.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00051.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00052.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00053.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00054.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00055.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00056.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00057.png" },
        { url: "http://www.pivotal-china.com/mtx/img/bear/lettera1_00058.png" }
      ],
      step: 0,
      timer: null,
      count: 0,
      isPlaying: false,
      bg: "",
      aBg: require("@/assets/images/indexBg/Aindex.jpg"),
      bBg: require("@/assets/images/indexBg/Bindex.jpg"),
      cBg: require("@/assets/images/indexBg/Cindex.jpg"),
      dBg: require("@/assets/images/indexBg/Dindex.jpg"),
      eBg: require("@/assets/images/indexBg/Eindex.jpg"),
      fBg: require("@/assets/images/indexBg/Findex.jpg"),
      gBg: require("@/assets/images/indexBg/Gindex.jpg"),
      hBg: require("@/assets/images/indexBg/Hindex.jpg"),
      iBg: require("@/assets/images/indexBg/Iindex.jpg"),
      jBg: require("@/assets/images/indexBg/Gindex.jpg"),
      kBg: require("@/assets/images/indexBg/Kindex.jpg"),
      lBg: require("@/assets/images/indexBg/Lindex.jpg"),
      mBg: require("@/assets/images/indexBg/Mindex.jpg"),
      nBg: require("@/assets/images/indexBg/Nindex.jpg"),
      oBg: require("@/assets/images/indexBg/Oindex.jpg"),
      pBg: require("@/assets/images/indexBg/Pindex.jpg"),
      qBg: require("@/assets/images/indexBg/Qindex.jpg"),
      rBg: require("@/assets/images/indexBg/Rindex.jpg"),
      sBg: require("@/assets/images/indexBg/Sindex.jpg"),
      tBg: require("@/assets/images/indexBg/Tindex.jpg"),
      uBg: require("@/assets/images/indexBg/Uindex.jpg"),
      vBg: require("@/assets/images/indexBg/Vindex.jpg"),
      wBg: require("@/assets/images/indexBg/Windex.jpg"),
      xBg: require("@/assets/images/indexBg/Xindex.jpg"),
      yBg: require("@/assets/images/indexBg/Yindex.jpg"),
      zBg: require("@/assets/images/indexBg/Zindex.jpg"),
      animateNum: 100
    };
  },
  created() {
    console.log("*****************", this.$route.query.id);
    let temp = this.$route.query.id;
    if (temp == undefined || temp == "" || temp == null) {
      temp = "a";
    }
    this.bg = this[temp.toLowerCase() + "Bg"];
    // this.MainClick();
    window.setTimeout(() => {
      this.id = "shake";
    }, 4000);
  },
  watch: {
    count(val) {
      console.log(val);
      if (val == 59) {
        this.timer = setInterval(this.xiongZz, 60);
      }
    }
  },
  mounted() {
    let animateTime = setInterval(() => {
      this.animateNum -= 1;
      if (this.animateNum == 0) {
        this.$refs["showReady"].style.display = "block";
        this.$refs["reday"].style.display = "none";
        this.$refs["redayShow"].style.display = "none";
        this.$refs["readyBtn"].style.visibility = "visible";
        clearInterval(animateTime);
      }
      this.$refs["reday"].style.width = this.animateNum + "%";
    }, 40);
    // var audio = document.querySelector("#stratMusic2");
    // document.addEventListener("DOMContentLoaded", function() {
    //   function audioAutoPlay() {
    //     audio.play();
    //     document.addEventListener(
    //       "WeixinJSBridgeReady",
    //       function() {
    //         audio.play();
    //       },
    //       false
    //     );
    //   }
    //   audioAutoPlay();
    // });
    // this.MainClick();
    // // setInterval(this.toggle,1)
    // audio.play();
    //预加载
    this.preload();
  },
  methods: {
    begin(){
        this.$refs["bg1"].style.display = "none";
        this.$refs["bg2"].style.display = "none";
        var audio = document.querySelector("#stratMusic2");
        audio.play();
    },
    toggle(params) {
      var audio2 = document.querySelector("#stratMusic2");
      if (audio2.paused) {
        audio2.paused = false;
        audio2.play();
      }
    },
    MainClick() {
      
    },
    go() {
      var audio = document.querySelector("#stratMusic");
      if (!this.isPlaying) {
        audio.play();
        this.isPlaying = true;
      }
      let go = setTimeout(() => {
        this.$router.push({
          path: "/" + this.$route.query.id.toLowerCase() + "Page1"
        });
        clearTimeout(go);
      }, 500);
    },
    play() {
      var audio = document.querySelector("#stratMusic");
      if (!this.isPlaying) {
        audio.play();
        this.isPlaying = true;
      }
    },
    stop() {
      var audio = document.querySelector("#stratMusic");
      if (this.isPlaying) {
        audio.pause();
        audio.currentTime = 0;
      }
    },
    //预加载
    preload: function() {
      for (let item of this.curImgList) {
        // console.log(item)
        let image = new Image();
        image.src = item.url;
        image.onload = () => {
          this.count++;
          console.log(this.count);
        };
      }
    },
    xiongZz() {
      this.curImg = this.curImgList[this.step].url;
      this.step++;
      // console.log(this.step)
      if (this.step == 59) {
        this.step = 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  top: 0;
  right: 0;
}
#stratMusic {
  display: none;
}
#stratMusic2 {
  display: none;
}
.bg {
  opacity: 0;
  animation: fadeIn 1s both;
}
#show {
  animation: fadeIn 1s 2s both;
  opacity: 0;
}
#shake {
  animation: jackInTheBox 3s ease-out 0s infinite alternate-reverse;
}
.xiong {
  animation: fadeInLeft 1s 1s both;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-content: center;

  img {
    width: 3.94rem;
    height: 6.72rem;
  }
  //针对手机
  @media screen and (max-width: 1000px) {
    img {
      width: 1.25rem;
      height: 2.7rem;
    }
  }
}

.start {
  position: fixed;
  bottom: 0.5rem;
  width: 100%;
  .start-button {
    width: 1.85rem;
    height: 0.65rem;
    background: url("../assets/images/startBtn.png") center center no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;

    font-size: 0.18rem;
    display: block;
    text-align: center;
    line-height: 0.65rem;
    margin: 0 auto;
  }
}

.bgA {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: .8;
}
.animateBg {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/images/indexAnimate.png") center center no-repeat;
  background-size: 100% 100%;
  .animateIndex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37%;
    .mainAnimate {
      width: 100%;
      position: relative;
    }
    .btn {
      visibility: hidden;
      width: 2.6rem;
      height: auto;
      margin: 0 auto;
      @media screen and (max-width: 1000px) {
        width: 1.3rem;
      }
    }
  }

  .content {
    // display: none;
  }
}
.progress {
  height: 1.6rem;
  width: 100%;
  float: right;
  @media screen and (max-width: 1000px) {
    height: 0.8rem;
  }
}
</style>
